<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jq/jquery.js"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				height: 60px;
				background-color: #000000; 
			}
			#yjc{
				height: 200px;
				background-color:#FFE4B5;
			}
			h1{
				text-align: center;
				padding-top: 80px;
				font-size: 3em;
				font-family: "楷体";
			}
			#d2{
				float: left;
				list-style-type: none;
				line-height: 60px;
				padding-left: 0px;
				width: 250px;
				font-size: 25px;
				font-family: "黑体";
				color:#FFFAFA;
				text-align: center;
				
			}
			#d1{
				padding-left: 120px;
			}
			#d2>ul>li{
				list-style-type: none;
				width: 140px;
			}
			a{				
				text-decoration: none;
				color:#FFFAFA;
				font-size: 1em;
				font-family: "黑体";
				text-align: center;
			}
			#d2:hover{
			    color:#4169E1;
				padding:12px 12px 0px 12px;
			    background-color: #000000; 
			}
			a:hover {
			    color:#4169E1;
				padding:5px 5px 2px 5px;
			    background-color:#F5FFFA;
			    border-top:1px solid red;
			    border-left:1px solid red;
			    border-bottom:1px solid red;
			    border-right:1px solid red;
			}
		</style>
	</head>
	<body>
	<div id="yjc">
		<h1>湖北三峡职业技术学院</h1>
	</div>
		<div>
			<ul id="d1">
				<li id="d2">
					电子信息学院
					<ul style="display: none;">
						<li><a href="#">软件技术</a></li>
						<li><a href="#">计应</a></li>
						<li><a href="#">室内设计</a></li>
						<li><a href="#">物联网</a></li>
						<li><a href="#">网络技术</a></li>
					</ul>
				</li>
				<li id="d2">
					机电工程学院
					<ul style="display: none;">
						<li><a href="#">机电一体化</a></li>
						<li><a href="#">数控技术</a></li>
						<li><a href="#">电气自动化</a></li>
					</ul>
				</li>
				<li id="d2">
					经管学院
					<ul style="display: none;">
						<li><a href="#">市场营销</a></li>
						<li><a href="#">会计</a></li>
						<li><a href="#">物流管理</a></li>
					</ul>
				</li>
				<li id="d2">
					交通学院
					<ul style="display: none;">
						<li><a href="#">数控</a></li>
						<li><a href="#">机电</a></li>
						<li><a href="#">汽修</a></li>
					</ul>
				</li>
				<li id="d2">
					旅教学院
					<ul style="display: none;">
						<li><a href="#">学前教育</a></li>
						<li><a href="#">酒店管理</a></li>
						<li><a href="#">钢琴调律</a></li>
						<li><a href="#">旅游管理</a></li>
					</ul>
				</li>
				<li id="d2">
					农学院
					<ul style="display: none;">
						<li><a href="#">畜牧兽医</a></li>
						<li><a href="#">药品生产</a></li>
						<li><a href="#">动物医学</a></li>
					</ul>
				</li>
				<li id="d2">
					医学院
					<ul style="display: none;">
						<li><a href="#">护理</a></li>
						<li><a href="#">康复</a></li>
						<li><a href="#">临床</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			$("li").mouseover(function(){
				$(this).find("ul").css("display", "block");
			});
			$("li").mouseout(function(){
				$(this).find("ul").css("display", "none");
			});
		</script>
	</body>
</html>
